<template>
  <div class="payment">
    <Card>
      <p slot="title">代付列表信息</p>
      <Form :model="form">
        <Row :gutter="24" type="flex" justify="end" class="code-row-bg">
          <Col span="4">
            <FormItem prop="timeData">
              <i-select v-model="form.timeData" clearable style="color: #000;" placeholder="时间段">
                <Option value="today">当日</Option>
                <Option value="yesterday">昨日</Option>
                <Option value="week">本周</Option>
                <Option value="month">本月</Option>
              </i-select>
            </FormItem>
          </Col>
          <Col span="4">
            <FormItem prop="starttime">
              <Date-picker style="width: 100%;" clearable  v-model="form.starttime" type="datetime" placeholder="开始时间"></Date-picker>
            </FormItem>
          </Col>
          <Col span="4">
            <FormItem prop="endtime">
              <Date-picker style="width: 100%;" clearable  v-model="form.endtime" type="datetime" placeholder="结束时间"></Date-picker>
            </FormItem>
          </Col>

        </Row>
        <Row :gutter="24" type="flex" justify="end" class="code-row-bg">
          <Col span="4">
            <FormItem prop="order_no">
              <i-input v-model="form.order_no" clearable placeholder="代付单号"></i-input>
            </FormItem>
          </Col>
          <!-- <Col span="4">
            <FormItem prop="acceptor">
              <i-input v-model="form.acceptor" clearable placeholder="受理人"></i-input>
            </FormItem>
          </Col> -->
          <Col span="4">
            <FormItem prop="transfer_no">
              <i-input v-model="form.transfer_no" clearable placeholder="转账单号"></i-input>
            </FormItem>
          </Col>
          <Col span="4">
            <FormItem prop="channel">
              <i-select v-model="form.channel" clearable style="color: #000;" placeholder="代付渠道">
              <!--  <Option value="0">付款渠道</Option> -->
                <Option value="pt">商户后台</Option>
                <Option value="api">API</Option>
              </i-select>
            </FormItem>
          </Col>
          <Col span="4">
            <FormItem prop="status">
              <i-select v-model="form.status" clearable style="color: #000;" placeholder="状态">
                <Option value="">全部</Option>
                <Option value="0">待处理</Option>
                <Option value="1">处理中</Option>
                <Option value="2">成功</Option>
                <Option value="3">失败</Option>
                 <Option value="4">回退</Option>
              </i-select>
            </FormItem>
          </Col>
        </Row>
        <FormItem class="btn-search" style="float: right;">
         <Button @click="search" class="com-btm">
           搜索</Button>
        </FormItem>
      </Form>
      <div style="clear: both; height: 0px;"></div>
      <div class="record">

        订单数：<span class="list1">{{totalData.paidCount}}</span>
        代付金额：<span class="list1">{{totalData.paidSum}}</span>
        代付费用：<span class="list2">{{totalData.poundageSum}}</span>
        扣减金额：<span class="list2">{{totalData.subMomeySum}}</span>
      </div>
      <i-table  :columns="allColumns" :data="listData">
        <template slot-scope="{ row }" slot="issue_money">
          {{ row.issue_money | submoneyf(row.poundage) }}
        </template>
        <template slot-scope="{ row }" slot="status">
          <Tag :color="row.status | tagColor">{{ row.status | paidStatus }}</Tag>
        </template>
      </i-table>
      <div style="margin-top: 10px;">
        <Page size="small" :total="dataCount" :page-size="pageSize"
        @on-change="changepage" @on-page-size-change="pagesize"
          show-total show-sizer show-elevator></Page>
      </div>
    </Card>
  </div>
</template>
<script>
import RecordList from '@/components/record-list/record-list.vue'
import { getpaidlist } from '@/api/paid'
export default {

  components: {
    RecordList
  },
  data () {
    return {
      pagedData: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 10,
      pageCurrent: 1, // 当前页
      paidSum: 0,
      poundageSum: 0,
      deducionSum: 0,

      form: {
        uid: this.$store.state.user.userInfo.uid,
        timeData: '',
        starttime: '',
        endtime: '',
        keyword: '',
        order_no: '',
        acceptor: '',
        transfer_no: '',
        channel: '',
        status: '',
        sortBy: '',
        descending: ''
      },
      totalData: {},
      allColumns: [{
        title: '代付单号',
        key: 'order_no',
        width: 140,
        tooltip: true,
        align: 'left'
      },
      {
        title: '账户名',
        key: 'account_name',
        width: 110,
        tooltip: true
      },
      {
        title: '账户',
        width: 100,
        key: 'account',
        tooltip: true
      },
      {
        title: '银行名称',
        width: 100,
        key: 'bank_name',
        tooltip: true
      },
      {
        title: '代付金额(元)',
        width: 110,
        key: 'issue_money'
      },
      {
        title: '手续费(元)',
        width: 110,
        key: 'poundage',
        align: 'left'
      },
      {
        title: '扣减金额(元)',
        width: 130,
        slot: 'issue_money'
      },

      {
        title: '代付渠道',
        width: 110,
        key: 'channel'
      },
      {
        title: '状态',
        width: 120,
        align: 'center',
        slot: 'status'
      },
      {
        title: '创建/处理时间',
        key: 'add_time',
        align: 'center',
        width: 160,
        sortable: true,
        render: (h, params) => {
          return h('div', [h('div', params.row.add_time), h('div', params.row.dispose_time)])
        }
      },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        width: 100,
        render: (h, params) => {
          return h('div', [
            h(
              'Button',
              {
                props: {
                  size: 'small'
                },
                style: {
                  color: 'white',
                  padding: '0 5px',
                  marginRight: '10px',
                  height: '24px',
                  fontSize: '12px',
                  backgroundColor: '#009688'
                },
                on: {
                  click: () => {
                    this.$router.push({
                      name: 'order_details_page',
                      params: { row: params.row }
                    })
                  }
                }
              },
              '详情'
            )

          ])
        }
      }
      ],

      newData: [],
      listData: []
    }
  },

  methods: {
    getpaidData () {
      this.form.uid = this.$store.state.user.userInfo.uid
      this.form.pageSize = this.pageSize
      this.form.pageCurrent = this.pageCurrent
      getpaidlist(this.form)
        .then(res => {
          this.listData = res.data.data
          this.dataCount = res.data.count
          this.totalData = res.data.totalData
          this.pagedList()
          // console.log(this.listData[0].issue_money)
          this.recordData[0].num = this.listData.length
          for (let i = 0; i < this.listData.length; i++) {
            this.paidSum = this.paidSum + parseInt(this.listData[i].issue_money)
            this.poundageSum = this.poundageSum + parseInt(this.listData[i].poundage)
            // console.log(this.listData[i].issue_money)
          }
          this.recordData[1].num = this.paidSum
          this.recordData[2].num = this.poundageSum
          this.recordData[3].num = this.paidSum + this.poundageSum
        })
        .catch(err => {
          this.$Message.error(err.msg)
        })
    },
    // 按条件搜索
    searchBtn () {
      this.getpaidData()
    },

    // 点击切换页面
    changepage (index) {
      // 储存当前页
      this.page = index
      this.getpaidData()
    },
    // 每页显示的数据条数
    pagesize (index) {
      // 实时获取当前需要显示的条数
      this.pageSize = index
      this.getpaidData()
    }
  },
  created () {
    this.getpaidData()
  }
}
</script>
<style lang="less">
  @import './payment.less';
</style>
